Custom Html Code Here

<html>
   <head>
<style>
    /* Apply transition to smooth the animation */
    a {
        display: inline-block; /* Necessary for animation to work */
        text-decoration: none;
        font-size: 14pt;
        color: royalblue; /* Set default color to royal blue */
        position: relative; /* Set position to relative */
    }

/* Fade-in effect */
    a::before {
        content: ''; /* No content for the before pseudo-element */
        position: absolute; /* Position the pseudo-element */
        left: 0; /* Align to left */
        bottom: 0; /* Align to bottom */
        width: 100%; /* Full width */
        height: 2px; /* Underline height */
        background-color: royalblue; /* Underline color */
        transition: height 0.3s ease; /* Add transition */
        z-index: -1; /* Ensure underline is behind text */
    }

/* Show underline animation on hover */
    a:hover::before {
        height: 100%; /* Expand height to full */
    }

/* Other link styles */
    a:visited {
        /* Style for visited links */
    }
    
    a:active {
        /* Style for active links */
    }
</style>

</center>

<!DOCTYPE html> 
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Crafted By: R.Y.U</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #000000;
            margin: 0;
            padding: 0;
        }

.container {
            width: 60%;
            margin: 50px auto;
            text-align: center;
        }

.profile-box {
            display: inline-block;
            padding: 6px 12px;
            background-color: skyblue; /* Lighter blue background */
            border: 2px solid royalblue; /* Suitable border color */
            border-radius: 5px;
            transition: background-color 0.3s ease;
            font-size: 14px;
            color: white; /* Change text color to white */
            width: auto;
            height: auto;
        }

.profile-box:hover {
            background-color: skyblue; /* Keep the background color as skyblue on hover */
        }

.profile-box a {
            text-decoration: none;
            color: white; /* Change text color to white */
            font-weight: bold;
            transition: color 0.3s ease; /* Add transition effect */
        }

.profile-box a:hover {
            color: royalblue; /* Change text color to royal blue on hover */
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="profile-box"> <a href="https://www.myleague.com/misfits/profile/Riot"> Crafted by: R.Y.U </a> </div>
    </div>
</body>
</html>

<!DOCTYPE html>
<html>
   <head>
      <title>Shaded Box Example</title>
      <style>
        .shaded-box {
            background-color: skyblue; /* Change background color to sky blue */
            border: 2px solid royalblue; /* Add border with royal blue color */
            border-radius: 5px; /* Rounded corners */
            padding: 10px; /* Adjusted padding */
            width: 330px; /* Adjusted width */
            height: 10px; /* Decreased height */
            /* Center the content vertically */
            display: flex;
            justify-content: center;
            align-items: center;
        }

.shaded-box p {
            font-size: 12px; /* Decreased font size */
            color: white; /* Change text color to white */
        }

.shaded-box a {
            text-decoration: none;
            color: white; /* Change text color to white */
            transition: color 0.3s ease; /* Add transition effect */
        }

.shaded-box a:hover {
            color: royalblue; /* Change text color to royal blue on hover */
        }

/* Apply effects only to the "Riot" text */
        .shaded-box a span {
            transition: transform 0.3s ease; /* Add transition effect */
        }

.shaded-box a:hover span {
            transform: scale(1.1); /* Scale up on hover */
        }
      </style>
   </head>
   <body>
      <div class="shaded-box">
         <p>Note: Want your desire tour page? Fill up the form! 📝<a href="https://forms.office.com/pages/responsepage.aspx?id=DQSIkWdsW0yxEjajBLZtrQAAAAAAAAAAAANAAWjuvURUOEZIRjk3REhaSkVPTlNaMkxRWUpaRTk3Ry4u"><span>Riot</span></a></p>
      </div>
   </body>
</html>

Copy and Paste the following into *Background Image